<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>路径动画</title>
    <style>
       path {
            stroke-dasharray: 3000;
            stroke-dashoffset: 3000;
            -webkit-animation: dash 5s linear infinite;
            animation: dash 5s linear infinite;
        }
        @-webkit-keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
            }
            @keyframes dash {
            to {
                stroke-dashoffset: 0;
            }
        }
        .container{
            position: relative;
        }
        .animation{
            position: absolute;
            top:0;
            left:0;
        }
        #plane{
            transform-origin: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
                <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
                <g>
                <title>background</title>
                <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
                </g>
                </g>
                <g>
                <title>Layer 1</title>
                <path id="path" d="m323.5,53.4375c-4,0 -17.0022,-0.17484 -24,0c-20.01874,0.50016 -25.97797,1.49978 -43,2c-4.99785,0.14687 -19.00774,-0.24855 -23,0c-8.04668,0.50097 -11.28368,0.66368 -19,3c-2.14012,0.64798 -7.88531,3.12968 -9,4c-4.59599,3.58844 -7.12601,3.82281 -10,6c-7.34892,5.56716 -16.31021,14.71899 -19,18c-4.57176,5.57665 -11.05334,13.96838 -14,19c-8.14845,13.91412 -9.78986,17.07844 -11,20c-1.71141,4.13171 -4.18834,10.94366 -5,14c-1.30876,4.92821 -1,8 -1,13c0,2 -0.36655,6.02248 0,9c0.50377,4.09221 1.28859,6.86829 3,11c1.21014,2.92157 2.71413,8.21167 5,11c4.48297,5.46835 8.74675,8.37134 13,11c7.60846,4.70229 18.14052,8.56123 25,11c7.17575,2.55121 14.97856,6.05446 20,8c7.96692,3.08676 12.01826,3.93379 23,7c7.01192,1.95779 18.99142,5.0439 24,6c10.98203,2.09641 17.9856,4.08093 29,6c5.99249,1.04408 15.92767,3.23174 22,5c3.95868,1.15277 13.59286,4.10626 20,9c3.37164,2.57526 9.88708,7.11734 13,10c6.76459,6.26422 10.34235,8.56342 13,11c4.71973,4.32715 6.88052,6.95782 9,13c0.66202,1.88727 1,6 1,7c0,2 0,3 0,6c0,0 -1,3 -1,3c-6,8 -8.78653,10.23917 -11,12c-7.38284,5.87314 -10.77173,6.38528 -19,11c-3.90057,2.18759 -14.0517,6.85651 -17,8c-9.1824,3.56137 -13.11499,4.539 -22,7c-3.04755,0.84412 -9,1 -18,1c-6,0 -14,-1 -20,-2c-12,-2 -20.4308,-2.23788 -32,-6c-6.37938,-2.07446 -20.11554,-7.6734 -29,-11c-12.17456,-4.55853 -16.92616,-7.17044 -26,-11c-4.9614,-2.09393 -13.1237,-7.80286 -18,-11c-7.19394,-4.71667 -12.22768,-5.59399 -17,-11c-1.47984,-1.67633 -4.52016,-4.32367 -6,-6c-2.38616,-2.703 -3.09789,-3.82443 -5,-5c-0.85065,-0.52573 -2.1731,-1.85272 -3,-3c-1.30745,-1.814 -2,-5 -2,-7c0,-2 -1,-2 -1,-3c0,0 0,0 0,0c0,0 0,-1 0,-1l0,0" id="svg_1" stroke-width="1.5" stroke="#000" fill="none"/>
                </g>
            </svg>
        </div>
        <div class="animation">
            <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
                <path id="plane" d="m368.5,122.4375c0,0 0.29291,-0.70711 1,0c0.70709,0.70711 2,3 3,4c2,2 3.21167,1.71413 6,4c1.09366,0.89659 3.02676,2.77025 4,3c2.17624,0.51375 2.47427,2.14935 3,3c1.17557,1.90211 3.29291,2.29289 4,3c0.70709,0.70711 1,0 2,1c0,0 0.29291,-0.70711 1,0c0.70709,0.70711 0.29291,0.29289 1,1c0.70709,0.70711 0,1 0,1c0,0 1,0 1,0c0,0 0,1 0,1c0,0 1,0 1,1c0,0 0.29291,-0.70711 1,0c0.70709,0.70711 0,1 1,1c0,0 0,1 0,1c0,0 1,0 1,1c0,0 0,0 0,0c0,0 0,1 1,1c0,0 -1,0 -1,0c0,0 0,0 0,0c-1,1 -1.69345,1.4588 -3,2c-0.92389,0.38269 -1.85272,1.1731 -3,2c-1.814,1.30745 -2.07611,0.61731 -3,1c-1.30655,0.5412 -2.29291,1.29289 -3,2c-0.70709,0.70711 -0.69345,1.4588 -2,2c-0.92389,0.38269 -1,1 -2,2c0,0 -1,1 -1,1c-1,1 -1,1 -2,2c0,0 -0.29291,0.29289 -1,1c-0.70709,0.70711 -0.29291,0.29289 -1,1c-0.70709,0.70711 -1,1 -2,2c0,0 -1.07611,0.61731 -2,1c-1.30655,0.5412 -1,1 -2,2c-1,1 -1.29291,0.29289 -2,1c-0.70709,0.70711 -0.29291,1.29289 -1,2c-0.70709,0.70711 -1,0 -2,1c0,0 0,0 -1,1c0,0 0,0 0,0l0,0l0,0l1,-5" id="svg_2" stroke-width="1.5" stroke="#000" fill="none"/>
            </svg> 
        </div>
    </div>
    <svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
        <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
        <g>
         <title>background</title>
         <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
         <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
          <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
         </g>
        </g>
        <g>
         <title>Layer 1</title>
         <path id="path" d="m323.5,53.4375c-4,0 -17.0022,-0.17484 -24,0c-20.01874,0.50016 -25.97797,1.49978 -43,2c-4.99785,0.14687 -19.00774,-0.24855 -23,0c-8.04668,0.50097 -11.28368,0.66368 -19,3c-2.14012,0.64798 -7.88531,3.12968 -9,4c-4.59599,3.58844 -7.12601,3.82281 -10,6c-7.34892,5.56716 -16.31021,14.71899 -19,18c-4.57176,5.57665 -11.05334,13.96838 -14,19c-8.14845,13.91412 -9.78986,17.07844 -11,20c-1.71141,4.13171 -4.18834,10.94366 -5,14c-1.30876,4.92821 -1,8 -1,13c0,2 -0.36655,6.02248 0,9c0.50377,4.09221 1.28859,6.86829 3,11c1.21014,2.92157 2.71413,8.21167 5,11c4.48297,5.46835 8.74675,8.37134 13,11c7.60846,4.70229 18.14052,8.56123 25,11c7.17575,2.55121 14.97856,6.05446 20,8c7.96692,3.08676 12.01826,3.93379 23,7c7.01192,1.95779 18.99142,5.0439 24,6c10.98203,2.09641 17.9856,4.08093 29,6c5.99249,1.04408 15.92767,3.23174 22,5c3.95868,1.15277 13.59286,4.10626 20,9c3.37164,2.57526 9.88708,7.11734 13,10c6.76459,6.26422 10.34235,8.56342 13,11c4.71973,4.32715 6.88052,6.95782 9,13c0.66202,1.88727 1,6 1,7c0,2 0,3 0,6c0,0 -1,3 -1,3c-6,8 -8.78653,10.23917 -11,12c-7.38284,5.87314 -10.77173,6.38528 -19,11c-3.90057,2.18759 -14.0517,6.85651 -17,8c-9.1824,3.56137 -13.11499,4.539 -22,7c-3.04755,0.84412 -9,1 -18,1c-6,0 -14,-1 -20,-2c-12,-2 -20.4308,-2.23788 -32,-6c-6.37938,-2.07446 -20.11554,-7.6734 -29,-11c-12.17456,-4.55853 -16.92616,-7.17044 -26,-11c-4.9614,-2.09393 -13.1237,-7.80286 -18,-11c-7.19394,-4.71667 -12.22768,-5.59399 -17,-11c-1.47984,-1.67633 -4.52016,-4.32367 -6,-6c-2.38616,-2.703 -3.09789,-3.82443 -5,-5c-0.85065,-0.52573 -2.1731,-1.85272 -3,-3c-1.30745,-1.814 -2,-5 -2,-7c0,-2 -1,-2 -1,-3c0,0 0,0 0,0c0,0 0,-1 0,-1l0,0" id="svg_1" stroke-width="1.5" stroke="#000" fill="none"/>
        </g>
    </svg>
    <input type="button" value="toogle" onclick="window.animate(this)"/>
    <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
    <script type="text/javascript" src="snap.svg.js"></script>    
    <script type="text/javascript">

        function animate(){
            var path = Snap.select("#path")
            var length = Snap.path.getTotalLength(path); // 获取path的长度
            var plane = Snap.select("#plane")
            Snap.animate(0, length, function(val) {
                var point = Snap.path.getPointAtLength(path, val); // 根据path长度变化获取坐标
                var m = new Snap.Matrix();
                m.translate(point.x, point.y);
                // m.rotate(point.alpha-90); // 使飞机总是朝着曲线方向。point.alpha：点的切线和水平线形成的夹角
                plane.transform(m);
            }, 6000, mina.easeout(), function() {
                console.log('animation end');
            });
        }
        
    </script>      
</body>
</html>